<%@ page import="org.grails.plugins.google.visualization.formatter.DateFormatter;org.grails.plugins.google.visualization.util.DateUtil;org.grails.plugins.google.visualization.data.Cell" %>
<%
          	   
	def amountEventsAndAlbums = [['date', 'Date'], ['number', 'Eventos'] , ['number', 'Albums']]
	def amountOrdersColumns = [['date', 'Date'], ['number', 'Pedidos'] , ['number', 'Pagados online']]
	def amountIncomeColumns = [['date', 'Date'], ['number', 'Total ingresos'] , ['number', 'Total ingresos de pedidos pagados online']]
	def graphsHeight = 300
	
	def now = new Date()
	def maxDateShownInYear = DateUtil.createDate(now.year+1900,now.month, now.day+10)
	def minDateShownInYear = DateUtil.createDate(now.year+1900-1,now.month, now.day-1)
%>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">		
		<title><g:message code="default.create.label" args="[entityName]" /></title>				
		<link rel="stylesheet" href="${resource(dir:'css',file:'statistics.css')}" type="text/css" />
		
		<g:isOnline>
		<gvisualization:apiImport/>
		</g:isOnline> 
		
		<style>
			/* force a height so the tabs don't jump as content height changes */
			#tabs .tabs-spacer { float: left; height: 350px; }
			.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
			.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
			.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }
		</style>
	</head>
	<body>
		<div class="page-header">
			<h1>
				<g:message code="statistics.title" />
			</h1>
		</div>
			
		<div class="row">
	      
	      	<div class="span12">
	      		
	      		<div class="widget big-stats-container">
	      			
	      			<div class="widget-content">
	      				
			      		<div id="big_stats" class="cf">
							<div class="stat">								
								<h4>Total Pedidos</h4>
								<span class="value">${amountOrders}</span>								
							</div> <!-- .stat -->							
							<div class="stat">								
								<h4>Total Ingresos</h4>
								<span class="value">${totalIncome}</span>								
							</div> <!-- .stat -->
							
							<div class="stat">								
								<h4>Pedidos pendientes</h4>
								<span class="value">${amountNotFinalized}</span>								
							</div> <!-- .stat -->
							
							<div class="stat">								
								<h4>Total Eventos</h4>
								<span class="value">${amountEvents}</span>								
							</div> <!-- .stat -->
						</div>
					
					</div> <!-- /widget-content -->
					
				</div> <!-- /widget -->
	      		
	      	</div> <!-- /span12 -->	
	      	
	  	  </div> <!-- /row -->
	  	  
	  	  <div class="row">
	      	
	      	<div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-arrow-right"></i>
						<h3>Pedidos en el último año</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
						
						<div class="centered" id="graphAmountOrdersInYear" > 
							<g:isOnline>
								<img  src="${resource(dir:'images', file: 'loading.gif')}" >
							</g:isOnline>
							<g:isOffline>
								<img  src="${resource(dir:'offline', file: 'pedidosAnio.png')}" >
							</g:isOffline>
						</div>
						
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->
	      	
	      	
	      	<div class="span6">
	      		
	      		<div class="widget">
							
					<div class="widget-header">
						<i class="icon-arrow-right"></i>
						<h3>Ingresos en el último año</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
						
						<div class="centered" id="graphAmountIncomeInYear" >
							<g:isOnline>
								<img  src="${resource(dir:'images', file: 'loading.gif')}" >
							</g:isOnline>
							<g:isOffline>
								<img  src="${resource(dir:'offline', file: 'ingresosAnio.png')}" >
							</g:isOffline> 
						</div>
						
					</div> <!-- /widget-content -->
				
				</div> <!-- /widget -->
									
		      </div> <!-- /span6 -->
	      	
	      </div> <!-- /row -->
	      
	      <div class="row"> 
	      	
	      	<div class="span12">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-arrow-right"></i>
						<h3>Eventos y albums</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
						
						<div class="centered" id="graphAmountEventsAndAlbumsInYear"> 
							<g:isOnline>
								<img  src="${resource(dir:'images', file: 'loading.gif')}" >
							</g:isOnline>
							<g:isOffline>
								<img  src="${resource(dir:'offline', file: 'eventsAndAlbums.png')}" >
							</g:isOffline>
						</div>
						
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
	      		
	      	</div> <!-- /span12 -->	
	      	
	  	  </div> <!-- /row -->
	      
		<g:isOnline>
		<gvisualization:lineCoreChart  
				elementId="graphAmountOrdersInYear" 
				height="${graphsHeight}"				
				width="${'100%'}" 
				columns="${amountOrdersColumns}" 				   
				data="${amountOrdersInLastYear}"
				title=""
				legend="${'top'}" 				
				chartArea="${new Expando(left:40, top:40, width:'400',height:220)}"		
				hAxis="${new Expando(title: 'Mes')}" /> 
				
		<gvisualization:lineCoreChart  
				elementId="graphAmountIncomeInYear" 
				height="${graphsHeight}"
				width="${'100%'}"				
				columns="${amountIncomeColumns}"					   
				data="${incomeInLastYear}"
				title="" 		
				legend="${'top'}"				
				chartArea="${new Expando(left:40, top:40, width:'400',height:220)}"
				hAxis="${new Expando(title: 'Mes')}" /> 
				
		<gvisualization:columnCoreChart  
				elementId="graphAmountEventsAndAlbumsInYear" 
				height="${graphsHeight}"
				width="${'100%'}"				
				columns="${amountEventsAndAlbums}"					   
				data="${amountEventsAndAlbumsInLastYear}"
				title="" 	
				legend="${'top'}" 					
				hAxis="${new Expando(	title: 'Mes',
										viewWindowMode:'explicit',
										viewWindow: new Expando(
															max:  maxDateShownInYear,
															min: minDateShownInYear)
									)}" /> 			
		
		</g:isOnline>
		
		
		
	</body>
</html>